import React from 'react';
import { Card, Row, Col, Table, Progress, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import styled from '@emotion/styled';

interface TaskData {
  key: string;
  name: string;
  status: string;
  progress: number;
  assignee: string;
  dueDate: string;
}

/**
 * 仪表盘页面组件
 * 展示项目进度、任务列表和系统监控信息
 */
const Dashboard: React.FC = () => {
  // 模拟任务数据
  const taskData: TaskData[] = [
    {
      key: '1',
      name: '用户界面设计',
      status: 'progress',
      progress: 75,
      assignee: '张三',
      dueDate: '2024-01-15',
    },
    {
      key: '2',
      name: '后端API开发',
      status: 'completed',
      progress: 100,
      assignee: '李四',
      dueDate: '2024-01-10',
    },
    {
      key: '3',
      name: '数据库优化',
      status: 'pending',
      progress: 30,
      assignee: '王五',
      dueDate: '2024-01-20',
    },
    {
      key: '4',
      name: '系统测试',
      status: 'progress',
      progress: 45,
      assignee: '赵六',
      dueDate: '2024-01-18',
    },
  ];

  // 表格列配置
  const columns: ColumnsType<TaskData> = [
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          completed: { color: 'green', text: '已完成' },
          progress: { color: 'blue', text: '进行中' },
          pending: { color: 'orange', text: '待开始' },
        };
        const statusInfo = statusMap[status as keyof typeof statusMap];
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
      },
    },
    {
      title: '进度',
      dataIndex: 'progress',
      key: 'progress',
      render: (progress: number) => (
        <Progress percent={progress} size="small" />
      ),
    },
    {
      title: '负责人',
      dataIndex: 'assignee',
      key: 'assignee',
    },
    {
      title: '截止日期',
      dataIndex: 'dueDate',
      key: 'dueDate',
    },
  ];

  return (
    <DashboardContainer>
      <PageHeader>
        <h2>仪表盘</h2>
        <p>项目进度和系统监控概览</p>
      </PageHeader>

      <Row gutter={[24, 24]}>
        <Col xs={24} lg={16}>
          <Card title="项目进度" bordered={false}>
            <ProgressSection>
              <ProgressItem>
                <span>前端开发</span>
                <Progress percent={75} status="active" />
              </ProgressItem>
              <ProgressItem>
                <span>后端开发</span>
                <Progress percent={60} status="active" />
              </ProgressItem>
              <ProgressItem>
                <span>测试阶段</span>
                <Progress percent={30} />
              </ProgressItem>
              <ProgressItem>
                <span>部署上线</span>
                <Progress percent={10} />
              </ProgressItem>
            </ProgressSection>
          </Card>
        </Col>

        <Col xs={24} lg={8}>
          <Card title="系统监控" bordered={false}>
            <MonitorSection>
              <MonitorItem>
                <span>CPU 使用率</span>
                <Progress percent={65} strokeColor="#52c41a" />
              </MonitorItem>
              <MonitorItem>
                <span>内存使用率</span>
                <Progress percent={78} strokeColor="#1890ff" />
              </MonitorItem>
              <MonitorItem>
                <span>磁盘使用率</span>
                <Progress percent={45} strokeColor="#722ed1" />
              </MonitorItem>
              <MonitorItem>
                <span>网络流量</span>
                <Progress percent={32} strokeColor="#fa8c16" />
              </MonitorItem>
            </MonitorSection>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
        <Col xs={24} lg={16}>
          <TaskSection>
            <Card title="任务列表" bordered={false}>
              <ResponsiveTable
                columns={columns}
                dataSource={taskData}
                pagination={{ pageSize: 5 }}
                scroll={{ x: 800 }}
              />
            </Card>
          </TaskSection>
        </Col>

        <Col xs={24} lg={8}>
          <Card title="团队状态" bordered={false}>
            <TeamStatus>
              <StatusItem>
                <span className="label">在线成员</span>
                <span className="value">8/12</span>
              </StatusItem>
              <StatusItem>
                <span className="label">进行中任务</span>
                <span className="value">15</span>
              </StatusItem>
              <StatusItem>
                <span className="label">已完成任务</span>
                <span className="value">42</span>
              </StatusItem>
              <StatusItem>
                <span className="label">待处理任务</span>
                <span className="value">7</span>
              </StatusItem>
            </TeamStatus>
          </Card>
        </Col>
      </Row>
    </DashboardContainer>
  );
};

// 样式组件
const DashboardContainer = styled.div`
  padding: 0;
`;

const PageHeader = styled.div`
  margin-bottom: 24px;

  h2 {
    margin: 0 0 8px 0;
    color: #1890ff;
    
    @media (max-width: 768px) {
      font-size: 20px;
    }
  }

  p {
    margin: 0;
    color: #666;
    
    @media (max-width: 768px) {
      font-size: 14px;
    }
  }
`;

const ProgressSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const ProgressItem = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;

  span {
    font-weight: 500;
  }
`;

const MonitorSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const MonitorItem = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;

  span {
    font-weight: 500;
  }
`;

const TeamStatus = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const StatusItem = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .label {
    color: #666;
  }

  .value {
    font-weight: bold;
    font-size: 16px;
    color: #1890ff;
  }
`;

const TaskSection = styled.div`
  width: 100%;
`;

const ResponsiveTable = styled(Table)`
  .ant-table-thead > tr > th {
    @media (max-width: 768px) {
      padding: 8px 4px;
      font-size: 12px;
    }
  }
  
  .ant-table-tbody > tr > td {
    @media (max-width: 768px) {
      padding: 8px 4px;
      font-size: 12px;
    }
  }
`;

export default Dashboard;